<template>
  <div class="carousel-container" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
    <div class="carousel" :style="{ transform: `translateX(${currentOffset}px)` }" id="carouselID">
      <div class="carousel-item" v-for="(image, index) in images" :key="index">
        <img :src="image.picture" :alt="image.alt" />
		
      </div>
	
    </div>
    <button class="carousel-control prev" @click="prevSlide" v-if="!isMobile || showControls">❮</button>
    <button class="carousel-control next" @click="nextSlide" v-if="!isMobile || showControls">❯</button>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { useWindowSize } from '@vueuse/core';

import { articleList, gettagList, getAdvertisement } from './api/api';

// const images = [
//   // { src: 'https://via.placeholder.com/800x400?text=Ad+1', alt: 'Ad 4' },
//   // { src: 'https://via.placeholder.com/800x400?text=Ad+2', alt: 'Ad 5' },
//   // { src: 'https://via.placeholder.com/800x400?text=Ad+3', alt: 'Ad 6' }
// ];

const images = ref([	
]);
onMounted(async () => {
  try {
    const [fetchedCarouselData] = await Promise.all([
     
      getAdvertisement(),
    ]);
    images.value = fetchedCarouselData.data;
	console.log(fetchedCarouselData.data);
	console.log(images);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
});


const currentIndex = ref(0);
const currentOffset = ref(0);
const isDragging = ref(false);
const startX = ref(0);
const moveX = ref(0);

const { width } = useWindowSize();
const isMobile = computed(() => width.value < 768);
const showControls = ref(true);


const slideWidth = 355; // 每个幻灯片的宽度

const nextSlide = () => {
  if (currentIndex.value < images.length - 1) {
    currentIndex.value++;
    currentOffset.value -= slideWidth;
  } else {
    currentIndex.value = 0;
    currentOffset.value = 0;
  }
};

const prevSlide = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--;
    currentOffset.value += slideWidth;
  } else {
    currentIndex.value = images.length - 1;
    currentOffset.value = -(slideWidth * (images.length - 1));
  }
};

const handleTouchStart = (event) => {
  isDragging.value = true;
  startX.value = event.touches[0].clientX;
};

const handleTouchMove = (event) => {
  if (!isDragging.value) return;
  moveX.value = event.touches[0].clientX - startX.value;
  currentOffset.value = -currentIndex.value * slideWidth + moveX.value;
};

const handleTouchEnd = () => {
  isDragging.value = false;
  if (moveX.value > 50) {
    prevSlide();
  } else if (moveX.value < -50) {
    nextSlide();
  } else {
    currentOffset.value = -currentIndex.value * slideWidth;
  }
  moveX.value = 0;
};

const autoplay = () => {
  setInterval(nextSlide, 3000);
};

onMounted(() => {
  autoplay();
});

onUnmounted(() => {
  clearInterval(autoplay);
});
</script>

<style scoped>
.carousel-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  touch-action: pan-y;
}

.carousel {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-item {
  min-width: 100%;
  box-sizing: border-box;
}

.carousel-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
  display: none; /* 默认隐藏 */
}

.carousel-control.prev {
  left: 10px;
}

.carousel-control.next {
  right: 10px;
}

@media (min-width: 768px) {
  .carousel-control {
    display: block; /* 在桌面设备上显示 */
  }
}
</style>